<template>
	<view class="">
		<!-- <change @changenav="changenav" :navlist="navList"></change> -->
		<view :class="['search_order',bgFlag?'search_order_i':'']">
			<view class="search_input">
				<input type="text" v-model="searchcontent" placeholder="请输入活动名称" />
				<image class="search_icon" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/search_icon.png" mode=""></image>
				<view class="err" @click="clearinput"><i class="icon icon_error" v-if="searchcontent">&#xe66f;</i></view>
			</view>
			<view class="search_btn" @tap="searchSing" v-if="searchcontent">搜索</view>
			<view class="searchFiltrate"  @tap="filtratePop">
				<view class="searchFiltrate_content">
					{{filtrate[state]}}
				</view>
				<i class="icon iconSort">&#xe650;</i></view>
			<!-- 筛选条件 -->
			<view class="filtrate" v-if="bgFlag">
				<view :class="['filtrate_contion',state == filtrate_index? 'filtrate_contion_i':'']" 
				@tap="filtrateChoose(filtrate_index)"
				v-for="(item, filtrate_index) in filtrate" 
				:key="filtrate_index">{{ item }}</view>
			</view>
		</view>
		<view class="filterBg" @tap="changeBgFlag" v-if="bgFlag" ></view>
		<!-- 筛选条件的背景 -->
		<view class="listOrder" v-if="list.length">
			<!-- <view class="filterBg"></view> -->
			<sing-up :list="list" @topay="topay" :nowTime="nowTime" @todetail="todetail" @eticket="eticket"></sing-up></view>
		<!-- 没有活动 -->
		<view class="nojoin" v-else>
			<view class="" v-if="state == 0">
				<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/index/nodata.png" mode=""></image>
				<view class="nojoin_wz">您还没有报名任何活动哦，快去报名吧！</view>
				<view class="tohome" @tap="singupActive">报名活动</view>
			</view>
			<view class="" v-else-if="state == 1">
				<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/index/nodata.png" mode=""></image>
				<view class="nojoin_wz">暂无待支付订单</view>
			</view>
			<view class="" v-else-if="state == 2">
				<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/index/nodata.png" mode=""></image>
				<view class="nojoin_wz">暂无待审核订单</view>
			</view>
			<view class="" v-else-if="state == 3">
				<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/index/nodata.png" mode=""></image>
				<view class="nojoin_wz">暂无待参与订单</view>
			</view>
			<view class="" v-else-if="state == 4">
				<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/index/nodata.png" mode=""></image>
				<view class="nojoin_wz">暂无完成订单</view>
			</view>
			<view class="" v-else-if="state == 5">
				<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/index/nodata.png" mode=""></image>
				<view class="nojoin_wz">暂无进行中订单</view>
			</view>
		</view>
		<!-- loading 遮罩层 -->
		<loading v-if="loadflag"></loading>
		<navigation></navigation>
		<!-- <uni-popup class="unipop" ref="filtrateRef" type="top">  </uni-popup> -->
	</view>
</template>

<script>
import singUp from '@/components/mysingup/singup.vue';
import loading from '@/components/loading/loading.vue';
import navigation from '@/components/navigation/navigation.vue';
import uniPopup from '@/components/uni-popupt/uni-popup.vue'
export default {
	components: { singUp, loading, navigation,uniPopup },
	data() {
		return {
			loadflag: true,
			navList: ['赛事', '活动', '任务'],
			nav_index: 0,
			list: [],
			nowTime: '',
			currentpage: 1,
			last_page: '',
			searchcontent: '',
			state: '',
			filtrate: ['全部', '待支付', '待审核', '待参与', '已完成', '进行中', '',''],
			activeType: 0,
			bgFlag: false
		};
	},
	onLoad(options) {
		this.state = options.state;
	},
	mounted() {
		this.nowTime = new Date().getTime();
		// this.getOrderList();
	},
	onReachBottom() {
		if (this.currentpage == this.last_page) {
			this.toast('没有更多数据了');
			return;
		}
		// this.toast('数据加载中');
		uni.showLoading({
			title: '数据加载中',
			mask: false
		});
		this.currentpage++;
		this.getOrderList();
	},
	onPullDownRefresh() {
		this.currentpage = 1;
		this.list = [];
		this.getOrderList();
	},
	onShow() {
		this.loadflag = true;
		this.currentpage = 1;
		this.list = [];
		this.getOrderList();
	},
	methods: {
		// 清楚搜索内容
		clearinput() {
			this.searchcontent = '';
		},
		searchSing () {
			this.currentpage = 1;
			this.list = [];
			this.loadflag = true;
			this.getOrderList();
		},
		getOrderList() {
			this.ajax('order/orderList', {
				data: {
					page: this.currentpage,
					name:this.searchcontent,
					state:this.state,
				},
				success: res => {
					uni.stopPullDownRefresh();
					 // console.log (res);
					// this.currentpage = res.msg.current_page;
					this.last_page = res.msg.last_page;
					var or_list = res.msg.data;
					or_list.forEach(item => {
						item.create_time_m = item.create_time.split(' ')[0];
						var info = item.active_info;
						info.sign_up_start_s = info.sign_up_start.replace(/-/g, '/');
						info.sign_up_end_s = info.sign_up_end.replace(/-/g, '/');
						info.start_time_s = info.start_time.replace(/-/g, '/');
						info.end_time_s = info.end_time.replace(/-/g, '/');
						// 报名开始时时间戳
						info.sing_start_c = new Date(info.sign_up_start_s).getTime();
						// 报名结束时间
						info.sing_end_c = new Date(info.sign_up_end_s).getTime();
						// 活动开始时间
						info.start_time_a = info.start_time.split(' ')[0];
						info.start_time_c = new Date(info.start_time_s).getTime();
						// 活动结束时间
						info.end_time_c = new Date(info.end_time_s).getTime();
						if (info.type == 1) {
							item.active_name = '赛事';
						} else if (info.type == 2) {
							item.active_name = '活动';
						} else {
							item.active_name = '任务';
						}
					});
					// if (this.state == 0) {
					// 	or_list = or_list;
					// } else if (this.state == 1) {
					// 	or_list = or_list.filter(item => item.state == 1);
					// 	 // console.log (or_list);
					// } else if (this.state == 2) {
					// 	or_list = or_list.filter(item => item.state == 2 && item.verify == 0);
					// 	 // console.log (or_list);
					// } else if (this.state == 3) {
					// 	or_list = or_list.filter(item => item.state == 2 && this.nowTime < item.active_info.start_time_c && item.verify == 1);
					// 	 // console.log (or_list);
					// } else if (this.state == 4) {
					// 	or_list = or_list.filter(item => item.state == 2 && this.nowTime > item.active_info.end_time_c && item.verify == 1);
					// 	 // console.log (or_list);
					// } else if (this.state == 5) {
					// 	or_list = or_list.filter(
					// 		item => item.state == 2 && this.nowTime > item.active_info.start_time_c && item.verify == 1 && this.nowTime < item.active_info.end_time_c
					// 	);
					// 	 // console.log (or_list);
					// }
					this.loadflag = false;
					this.list = this.list.concat(or_list);
					uni.hideLoading();
				}
			});
		},
		filtratePop() {	
			// this.$refs.filtrateRef.open()
			this.bgFlag = !this.bgFlag
		},
		changeBgFlag () {
			this.bgFlag = !this.bgFlag
		},
		// 根据条件进项筛选
		filtrateChoose(key) {
			 // console.log (key);
			// this.$refs.filtrateRef.close()
			this.loadflag = true;
			this.bgFlag = false
			this.state = key;
			this.list = [];
			this.currentpage = 1;
			// this.list = this.list.filter(item => item.active_info.type == key)
			this.getOrderList();
		},
		toorderdetail() {
			uni.navigateTo({
				url: '/pageA/order/orderdetail'
			});
		},
		// 报名活动 去往首页
		singupActive () {
			uni.reLaunch({
				url:'/pages/index/index'
			})
		},
		changenav(e) {
			this.nav_index = e;
		},
		todetail(e) {
			delete e.active.detail;
			var content = JSON.stringify(e.active);
			if (e.active.type == 3) {
				uni.navigateTo({
					url: '/pageA/order/orderdetail?id=' + e.key + '&active=' + content + '&club_id=' + e.club_id
				});
			} else {
				uni.navigateTo({
					url: '/pageC/mysingup/detail?id=' + e.key + '&active=' + content + '&club_id=' + e.club_id
				});
			}
		},
		// 去支付
		topay(e) {
			// delete e.active.detail;
			// var content = JSON.stringify(e.active);
			uni.navigateTo({
				url: '/pageC/singup/confirmpay?id=' + e.key + '&activename=' + e.activename
			});
		},
		eticket(key) {
			uni.navigateTo({
				url: '/pageC/mysingup/eticketgroup?id=' + key
			});
		}
	}
};
</script>

<style>
page {
	background-color: #f2f2f2;
	box-sizing: border-box;
	overflow: hidden;
}
</style>
<style lang="less" scoped>
// 没有加入任何活动
.nojoin {
	width: 100%;
	text-align: center;
	padding-top: 200upx;
	box-sizing: border-box;
	image {
		width: 240upx;
		height: 210upx;
	}
	.nojoin_wz {
		font-size: 28upx;
		color: #999999;
		line-height: 100upx;
	}
	.tohome {
		width: 300upx;
		height: 68upx;
		font-size: 32upx;
		color: #ffffff;
		text-align: center;
		line-height: 68upx;
		border-radius: 34upx;
		margin: auto;
		background: linear-gradient(to right, #8838d2 0%, #bb78f9 100%);
	}
}
.search_input {
	// width: 100%;
	// height: 66upx;
	flex: 1;
	position: relative;
	input {
		width: 100%;
		height: 68upx;
		border-radius: 34upx;
		background-color: #ffffff;
		padding-left: 56upx;
		line-height: 68upx;
		box-sizing: border-box;
		font-size: 28upx;
	}
	.search_icon {
		position: absolute;
		width: 28upx;
		height: 28upx;
		left: 20upx;
		top: 51%;
		transform: translate(0, -50%);
	}
	.err {
		position: absolute;
		right: 20upx;
		top: 50%;
		z-index: 1111;
		width: 36upx;
		height: 36upx;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		.icon_error {
			font-size: 32upx;
			height: 32upx;
		}
	}
}
.searchFiltrate {
	position: relative;
	display: flex;
	margin-left: 10upx;
	.searchFiltrate_content {
		font-size: 28upx;
		color: #333333;
		line-height: 68upx;
	}
}
.filtrate {
	position: absolute;
	left: 0;
	top: 100%;
	display: flex;
	// flex-direction: column;
	background-color: #ffffff;
	width: 100vw;
	z-index: 1000;
	padding: 30upx;
	padding-top: 10upx;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	.filtrate_contion {
		width: 150upx;
		background-color: #F9F9F9;
		font-size: 28upx;
		text-align: center;
		line-height: 48upx;
		margin-top: 20upx;
		color: #333;
		border-radius: 4upx;
	}
	.filtrate_contion_i {
		color: #FFFFFF;
		background-color:#8938d3 ;
	}
}
.unipop {
}
.search_order_i {
	position: relative;
	z-index: 1000;
}
.filterBg {
	position: absolute;
	top: 108upx;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	background-color: rgba(0,0,0,.3);
}
.iconSort {
	line-height: 68upx;
	font-size: 24upx;
	margin-left: 6upx;
}
.search_order {
	width: 100%;
	padding: 20upx 30upx;
	box-sizing: border-box;
	display: flex;
	position: relative;
	align-items: center;
	justify-content: space-between;
	.search_btn {
		width: 100upx;
		height: 58upx;
		border-radius: 6upx;
		background-color: #8938d3;
		font-size: 32upx;
		color: #ffffff;
		text-align: center;
		line-height: 58upx;
		margin-left: 20upx;
	}
}
.listOrder {
	padding: 0 30upx;
	box-sizing: border-box;
	position: relative;
}
</style>
